<template>
  <div>
    <siteHeader :header="header"></siteHeader>
    <el-main>
      <el-row>
        <el-col
          class="border"
          :xs="{span: 24, offset: 0}"
          :sm="{span: 18, offset: 3}"
          :md="{span: 14, offset: 5}"
          :lg="{span: 8, offset: 8}"
          :xl="{span: 8, offset: 8}"
        >
          <el-form
            :model="model"
            :rules="rules"
            ref="rules"
            status-icon
            label-width="100px"
            class="demo-ruleForm"
            label-position="left"
          >
            <el-form-item label="电话号码" prop="phone">
              <el-input v-model="model.phone" clearable></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="model.email" clearable></el-input>
            </el-form-item>

            <el-form-item label="新密码" prop="userPassword">
              <el-input v-model="model.userPassword" clearable type="password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="acknowledgement">
              <el-input v-model="model.acknowledgement" clearable type="password"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="teacherBelong">
              <el-input v-model="model.teacherBelong" placeholder="请联系管理员获取验证码" clearable></el-input>
            </el-form-item>
            <el-form-item size="large">
              <el-button type="primary" @click="(changePassword('rules'))">更改</el-button>
              <el-button @click="cancelCreate">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<style lang="scss" scoped>
@import "../../assets/styles/box-border.scss";
</style>>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.model.userPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      header: {
        menu: "忘记密码",
        toPageName: "去登陆",
        to: "/login"
      },
      model: {
        userPassword: "",
        acknowledgement: "",
        phone: "",
        email: "",
        teacherBelong: "",
        verificationCode: ""
      },
      rules: {
        userPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 50, message: "长度在 6 到 50 个字符", trigger: "blur" }
        ],
        acknowledgement: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
          { validator: validatePass, trigger: "blur" }
        ],
        phone: [{ required: true, message: "请输入电话号码", trigger: "blur" }],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur"
          },
          {
            pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
            message: "邮箱格式错误",
            trigger: "blur"
          }
        ],
        teacherBelong: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    changePassword(rules) {
      this.$refs[rules].validate(valid => {
        var userInfo = {};
        userInfo.password = this.model.userPassword;
        userInfo.phone = this.model.phone;
        userInfo.email = this.model.email;
        userInfo.teacherBelong = this.model.teacherBelong;
        if (valid) {
          this.$http.post("user/forget", userInfo).then(res => {
            if (res.data.data != null) {
              let phone = res.data.data;
              this.$message({
                message: `用户:${phone}的密码修改成功，请登录!`,
                type: "success"
              });
              this.$router.push("/login");
            } else {
              this.$message({
                message: "修改失败，请检查验证码或者电话号码!",
                type: "error"
              });
            }
          });
        } else {
          this.$message({
            message: "修改失败，请检查验证码或者电话号码!",
            type: "error"
          });
        }
      });
    },
    cancelCreate() {
      this.$message({
        message: "已取消修改密码!",
        type: "info",
        center: true
      });
      this.$router.push("/login");
      return;
    }
  }
};
</script>